import React, {useEffect, useState} from "react"
import {ReloadOutlined} from "@ant-design/icons";
import {Button, Select, SelectProps, Space} from "antd";
import styles from "./RefreshableSelect.module.sass"

export interface RefreshableSelectProps extends SelectProps{
    onRefresh:()=>Promise<void>
    options: SelectProps["options"]
}

const RefreshableSelect: React.FC<RefreshableSelectProps> = (props) => {
    const [loading, setLoading] = useState(false)
    return (
        <div >
            <Select style={{width:200}} {...props}  loading={loading} options={props.options}/>
            <Button onClick={async () => {
                setLoading(true)
                try {
                    await props.onRefresh()
                } finally {
                    setLoading(false)
                }
            }} icon={<ReloadOutlined className={[loading?styles.spin:"",].join(" ")} />} shape={"circle"} size={"small"} type={"text"}/>
        </div>
    )
}

export default RefreshableSelect
